<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:400px;
            height: 400px;
            background: red;
        }
        .center{
            width: 300px;
            height: 300px;
            background: blue;
        }
        .inner{
            width: 200px;
            height: 200px;
            background: black;
        }


    </style>
</head>
<body>
    <div class="outer">
        <div class="center">
            <div class="inner"></div>
        </div>
    </div>
    <script>
        var outerEle = document.querySelector(".outer");
        var centerEle = document.querySelector(".center");
        var innerEle = document.querySelector(".inner");
        /* 
            inner  
                center 
                    outer
                        body
                            html
                                document
                                    window
        
        
        */

        // 事件传播 会传播到父级 直到 window
        // 事件传播 冒泡机制 ，事件会有内向外逐层传递 Chrome
        // 事件传播 捕获机制 ，事件会有外层向内层逐层传递
        // addEventListener 第三个参数 ：默认 false：冒泡  true ；捕获 
        // innerEle.addEventListener("click",function(){
        //     console.log("inner");
        // },true)
        // centerEle.addEventListener("click",function(){
        //     console.log("center");
        // },true)

        // outerEle.addEventListener("click",function(){
        //     console.log("outer");
        // },true)

        // document.addEventListener("click",function(){
        //     console.log("document");
        // },true);



        //阻止 事件的传播 ；冒泡 捕获  
        // 1.stopPropagation 阻止事件传播；
        // 2.e.cancelBubble(取消冒泡)  = true  
        // 3.冒泡或者捕获 会提供一个路径  e.path 
        // 4.需要获取点击的元素  或提供一个目标元素  e.target || e.srcElemnt //ie8及一下兼容
        // babel ：在你写完代码以后 编译  --》兼容性处理
        innerEle.addEventListener("click",function(e){
           
            console.log("inner");
           
        })
        centerEle.addEventListener("click",function(e){
            console.log(e.target);
            console.log("center");
            
            // e.stopPropagation();  
            // e.cancelBubble = true; // 不冒泡
        })

        outerEle.addEventListener("click",function(){
            console.log("outer");
        })

        document.addEventListener("click",function(){
            console.log("document");
        });

    </script>
</body>

</html>